<template>
  <div>
    <el-dialog
      title="商家详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="12">
          <el-image
            style="width: 350px; height: 300px"
            :src="$baseUrl + info.goods_img"
            fit="cover"
          ></el-image>
        </el-col>
        <el-col :span="12">
          <el-descriptions :column="1" labelClassName="labelClassName">
            <el-descriptions-item label="商品ID">{{
              info.goods_id
            }}</el-descriptions-item>
            <el-descriptions-item label="商品分类">{{
              info.category_name
            }}</el-descriptions-item>
            <el-descriptions-item label="商品名称">{{
              info.goods_name
            }}</el-descriptions-item>
            <el-descriptions-item label="商品价格"
              >￥{{ info.goods_price }}</el-descriptions-item
            >
            <el-descriptions-item label="商品优惠金额">
              ￥{{ info.goods_preferential }}
            </el-descriptions-item>
            <el-descriptions-item label="商品描述">{{
              info.goods_desc
            }}</el-descriptions-item>
            <el-descriptions-item label="上下架状态">
              <el-tag :type="info.listing_status == 1 ? 'success' : 'danger'">
                {{ info.listing_time ? "已下架" : "已上架" }}</el-tag
              ></el-descriptions-item
            >
            <el-descriptions-item label="上下架时间">{{info.listing_time}}
            </el-descriptions-item> </el-descriptions
        ></el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {},
    };
  },
  methods: {
    open(row) {
      this.info = row;
      console.log("row: ", row);
      this.dialogVisible = true;
    },
    handleClose() {
      this.info = {};
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.el-descriptions {
  // padding: 5px 20px;
  font-size: 15px;
  font-weight: 600 !important;
  color: #303133 !important;
}

.labelClassName {
  font-weight: 600 !important;
  width: 100px !important;
  color: red !important;
}
</style>
